

<!--link rel="stylesheet" href="../static/css/jquery-ui-1.10.3.custom.css" type="text/css" media="screen, projection"/-->
<link rel="stylesheet" href="../static/bootstrap/css/bootstrap.css"
	type="text/css" media="screen" />

<!-- Optional theme -->
<link rel="stylesheet"
	href="../static/bootstrap/css/bootstrap-theme.min.css">
<script
	src="{{url_for('static', filename='../static/bootstrap/js/bootstrap.min.js')}}"
	type="text/javascript" charset="utf-8"></script>
<script
	src="{{url_for('static', filename='../static/js/jquery-1.9.1.js')}}"
	type="text/javascript" charset="utf-8"></script>


<div class="container">
	<h1>Sign up to SpringGala and book your ticket online</h1>
	<div>Adult	 $25, Senior (65 +) $5, Child (4-14) $10 each</div>
	<div>*Please do not leave your credit card information in the message, we will contact you through email or phone.</div>
	<br/>
	<form class="form-signin" action="/signup" method="post">

		<div class="z-page" value="0">

			<h3>Step 1: Sign up to SpringGala</h3>
			<!-- Username -->
			<div class="row form-group" name="username">
				<div class="col-md-3">
					<input class="form-control" type="text" placeholder="Name" />
				</div>
				<div class="col-md-3">Your name*</div>
			</div>
	
			<!-- Password -->
			<div class="row form-group" name="password">
				<div class="col-md-3">
					<input class="form-control col-md-3" type="password"
						placeholder="Password" />
				</div>
				<div class="col-md-3">6 characters or more*</div>
			</div>
	
			<!-- Email -->
			<div class="row form-group" name="email">
				<div class="col-md-3">
					<input class="form-control" type="text" placeholder="Email" />
				</div>
				<div class="col-md-3">Your email*</div>
			</div>
	
			<!-- Phone -->
			<div class="row form-group" name="phone">
				<div class="col-md-3">
					<input class="form-control" type="text" placeholder="Phone number" />
				</div>
				<div class="col-md-3">Your phone number</div>
			</div>
	
			<!-- Pay method
			<div class="row form-group" name="pay-method">
				<div class="col-md-3">
					<select class="form-control z-input">
						<option value="1">Off line</option>
						<option value="1">Paypal</option>
					</select>
				</div>
				<div class="col-md-3"></div>
			</div> -->
		
			<div class="row">
				<div class="col-md-3">
					<label class="checkbox"> <input type="checkbox" value="remeber-me">I Agree the following terms
					</label>
				</div>
			</div>
		
		</div><!-- end of page 0 -->
	
		<div class="z-page" value="1">
			<h3>Step 2: Book SpringGala ticket</h3>
			<!-- Ticket -->
			<div class="row form-group" name="n-adult-tickets">
				<div class="col-md-3">
					<select class="form-control z-input">
						<option value="1">0</option>
						<option value="1">1</option>
						<option value="1">2</option>
					</select>
				</div>
				<div class="col-md-3">Number of Adults, $25 each</div>
			</div>
			
			<!-- Ticket -->
			<div class="row form-group" name="n-senior-tickets">
				<div class="col-md-3">
					<select class="form-control z-input">
						<option value="1">0</option>
						<option value="1">1</option>
						<option value="1">2</option>
					</select>
				</div>
				<div class="col-md-3">Number of Senior (65+), $5 each</div>
			</div>
			
			<!-- Ticket -->
			<div class="row form-group" name="n-senior-tickets">
				<div class="col-md-3">
					<select class="form-control z-input">
						<option value="1">0</option>
						<option value="1">1</option>
						<option value="1">2</option>
					</select>
				</div>
				<div class="col-md-3">Number of Senior (4-14), $10 each</div>
			</div>
			
			
			<!-- Message -->
			<div class="row form-group" name="message" >
				<div class="col-md-3">
					<textarea class="form-control z-input" rows="5"
						placeholder="Messages"></textarea>
				</div>
	
				<div class="col-md-4 z-label">Special needs can be left here.</div>
			</div>
	
		</div><!-- end of page 1 -->
		
		
		<div class="row col-md-12">
			<div class="btn-toolbar col-md-7 z-btn-area">
				<button type="button"
					class="z-prev-btn cancel btn btn-primary col-md-2">Previous</button>
				<button type="button"
					class="z-next-btn cancel btn btn-primary col-md-2">Next</button>
				<button type="submit"
					class="z-submit-btn submit btn btn-primary col-md-2">Submit</button>
			</div>
		</div>
	</form>
</div>